# Component: Overlay

Visual blocking layer for asynchronous loading states

Utility Block

### BEM Anatomy

| Type      | Class Name         | Description                                                                            |
| --------- | ------------------ | -------------------------------------------------------------------------------------- |
| ==Block== | `.as-overlay`      | The backdrop layer. Covers 100% of the parent dimensions. Defaults to `display: none`. |
| Modifier  | `--active`         | Triggers visibility. Switches display to `block` and transitions opacity to `1`.       |
| Element   | `__content`        | The centered positioning wrapper for the indicator. Defaults to `absolute`.            |
| Modifier  | `__content--fixed` | Changes the indicator to `fixed` positioning, useful for full-viewport loading.        |
| Element   | `__inner-wrapper`  | A flex container inside the content area that aligns the icon and label.               |
| Element   | `__icon`           | The animated element (spinner/pulse). Manages rotation keyframes and color.            |
| Element   | `__label`          | Optional text description (e.g., "Please wait...") aligned beside the icon.            |

### Stacking & Theme Support

The overlay uses a `z-index: 1051` to sit just above standard modals and UI elements. It includes a specific override for dark mode, swapping the light-white transparency for a darker backdrop.

##### Generated HTML (Active State)

```html
<!-- Ensure parent is position-relative -->
<div class="position-relative">
    <!-- Content being loaded -->
    <div class="as-overlay as-overlay--active">
        <div class="as-overlay__content">
            <div class="as-overlay__inner-wrapper">
                <i class="as-overlay__icon fa-solid fa-circle-notch fa-spin"></i>
                <span class="as-overlay__label">Processing...</span>
            </div>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-overlay {
  // Theme-aware backdrop
  background-color: rgba(255, 255, 255, 0.5);

  &__content {
    // Perfect centering
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &--active {
    opacity: 1;
    display: block;
  }
}

[data-bs-theme=dark] .as-overlay {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
```
